<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        @click="handleAddOrder()"
      >
        添加求购订单
      </el-button>
    </div>
    <el-table :data="tableData" class="data_table" style="width: 100%">
      <el-table-column prop="name" label="求购商家" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.store.storeName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="place" label="商家地址" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.store.location }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goods" label="求购物品" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.good.goodName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodtype" label="商品品牌" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.good.goodType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodspec" label="规格型号" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.good.spec }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="求购数量" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.goodNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="求购价格" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="截至日期" width="250">
        <template slot-scope="{ row }">
          <el-date-picker
            ref="date"
            type="datetime"
            v-model="row.end_time"
            readonly
          />
        </template>
      </el-table-column>
      <el-table-column
        label="Actions"
        align="center"
        width="200"
        class-name="seeMore"
      >
        <template slot-scope="{ row }">
          <el-button class="filter-item" type="primary" @click="seeMore(row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--详细情况的表单-->
    <el-dialog :title="textMap.see" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataFormsee"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="求购店面" prop="shopName">
          <el-input v-model="temp.storeName" readonly />
        </el-form-item>
        <el-form-item label="店面地址" prop="shopLocation">
          <el-input v-model="temp.storeLocation" readonly />
        </el-form-item>
        <el-form-item label="商品编号" prop="goodId">
          <el-input v-model="temp.goodId" readonly />
        </el-form-item>
        <el-form-item label="求购商品" prop="goodName">
          <el-input v-model="temp.goodName" readonly />
        </el-form-item>
        <el-form-item label="商品品牌" prop="goodType">
          <el-input v-model="temp.goodType" readonly />
        </el-form-item>
        <el-form-item label="商品规格" prop="spec">
          <el-input v-model="temp.spec" readonly />
        </el-form-item>
        <el-form-item label="商品数量" prop="goodNumber">
          <el-input v-model="temp.goodNumber" readonly />
        </el-form-item>
        <el-form-item label="期望价格" prop="price">
          <el-input v-model="temp.price" readonly />
        </el-form-item>
        <el-form-item label="截至日期" prop="date">
          <el-date-picker
            ref="date"
            type="datetime"
            v-model="temp.end_time"
            readonly
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 返回 </el-button>
        <el-button type="primary" v-show="show" @click="handleAddQuotation()">
          提供报价
        </el-button>
        <el-button type="primary" v-show="show1" :disabled="dis">
          个人订单不可报价
        </el-button>
        <el-button type="primary" v-show="show2" :disabled="dis1">
          已报价
        </el-button>
      </div>
    </el-dialog>

    <!--报价单子-->
    <el-dialog :title="textMap.buy" :visible.sync="dialogFormVisible1">
      <el-form
        ref="dataFormbuy"
        :rules="rules"
        :model="offer"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="商品编号" prop="price">
          <el-input v-model="offer.goodId" readonly />
        </el-form-item>
        <el-form-item label="商品名称" prop="price">
          <el-input v-model="offer.goodName" readonly />
        </el-form-item>
        <el-form-item label="商品品牌" prop="price">
          <el-input v-model="offer.goodType" readonly />
        </el-form-item>
        <el-form-item label="商品规格" prop="price">
          <el-input v-model="offer.spec" readonly />
        </el-form-item>
        <el-form-item label="商品数量" prop="price" >
          <el-input v-model="offer.goodNumber" readonly />
        </el-form-item>
        <el-form-item label="报价" prop="price">
          <el-input v-model="offer.offer"  :placeholder="
              '请输入期望价格,批发价为' +
              offer.wholeSalePrice +
              ',零售价为' +
              offer.retailPrice" />
        </el-form-item>
        <el-form-item label="报价的截至日期" prop="date">
          <el-date-picker
            ref="date"
            type="datetime"
            v-model="offer.date"
            placeholder="请输入截止日期"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false"> 返回 </el-button>
        <el-button type="primary" @click="sure()"> 确认 </el-button>
      </div>
    </el-dialog>

    <!--添加求购订单-->
    <el-dialog :title="textMap.add" :visible.sync="dialogFormVisible2">
      <el-form
        ref="dataFormadd"
        :rules="rules"
        :model="order"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="求购商品ID" prop="goodName">
          <el-input ref="goodId" v-model="order.goodId" readonly />
        </el-form-item>
        <el-form-item label="求购商品" prop="goodName">
          <el-input ref="goodName" v-model="order.goodName" readonly />
        </el-form-item>
        <el-form-item label="商品品牌" prop="goodType">
          <el-input ref="goodtype" v-model="order.goodType" readonly />
        </el-form-item>
        <el-form-item label="商品规格" prop="spec">
          <el-input ref="goodtype" v-model="order.spec" readonly />
        </el-form-item>
        <el-form-item label="商品数量" prop="goodNumber">
          <el-input
            ref="goodnumber"
            v-model="order.goodNumber"
            placeholder="请输入商品数量"
          />
        </el-form-item>
        <el-form-item label="期望价格(单价)" prop="price">
          <el-input
            ref="goodprice"
            v-model="order.price"
            :placeholder="
              '请输入期望价格,批发价为' +
              order.wholeSalePrice +
              ',零售价为' +
              order.retailPrice
            "
          />
        </el-form-item>
        <el-form-item label="截至日期" prop="date">
          <el-date-picker
            ref="date"
            type="datetime"
            v-model="order.date"
            placeholder="请输入截至日期"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false"> 返回 </el-button>
        <el-button type="primary" @click="addOrder()"> 确认 </el-button>
      </div>
    </el-dialog>

    <!--选择要求购的商品-->
    <el-dialog title = "选择商品" :visible.sync="chooseGoodVisible" width="72%">
      <el-table :data="goodTable" class="data_table" style="width: 100%">
        <el-table-column prop="goodId" label="商品Id" width="70">
          <template slot-scope="{ row }">
            <span>{{ row.goodId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodName" label="商品名称" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.goodName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodtype" label="商品品牌" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.goodType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodspec" label="规格型号" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.spec }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="剩余库存" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.goodNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="批发价格" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.wholeSalePrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="零售价格" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.retailPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="有效期至" width="250">
          <template slot-scope="{ row }">
            <el-date-picker
              ref="date"
              type="datetime"
              v-model="row.validDate"
              readonly
            />
          </template>
        </el-table-column>
        <el-table-column
          label="Actions"
          align="center"
          width="200"
          class-name="seeMore"
        >
          <template slot-scope="{ row }">
            <el-button
              class="filter-item"
              type="primary"
              @click="chooseGood(row)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";
import qs from "qs";
import request from "@/utils/request";

Vue.prototype.$qs = qs;

export default {
  name: "tobuy",
  inject: ["reload"],
  data() {
    return {
      accessToken: "",
      dbid: 0,
      orderType: "ORDER_BUY",
      orderState: "ORDER_DISPLAY",
      storeNumber: "",
      userName: "",
      password: "",
      storeName: "",
      storeLocation: "",
      repositoryNumber: null,
      tableData: [],
      getGoodDataType: 0,
      goodTable: [
        {
          goodId: null,
          goodName: null,
          goodType: null,
          spec: null,
          wholeSalePrice: null,
          retailPrice: null,
          goodNumber: null,
          validDate: null,
          unit: null,
        }
      ],
      textMap: {
        see: "详细情况",
        buy: "报价单",
        add: "添加求购物品",
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      chooseGoodVisible: false,
      temp: {
        orderId: "",
        storeName: "",
        storeLocation: "",
        goodId: "",
        goodName: "",
        goodType: "",
        goodNumber: null,
        unitNumber: null,
        spec: "",
        price: 0,
        end_time: "",
      },
      show: false,
      show1: false,
      show2: false,
      dis: true,
      dis1: true,
      order: {
        goodId: null,
        goodName: null,
        goodType: null,
        unitNumber: null,
        spec: null,
        wholeSalePrice: 15,
        retailPrice: 20,
        validDate: new Date(),
        goodNumber: null,
        price: null,
        date: null,
      },
      offer: {
        orderId:null,
        goodId: null,
        goodName: null,
        goodType: null,
        unitNumber: null,
        spec: null,
        wholeSalePrice: 15,
        retailPrice: 20,
        validDate: new Date(),
        goodNumber: null,
        offer: null,
        date: null,
      },
      quotionIds: [], //表示 为该订单报价的商家id列表
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log(
        "时间为： " +
          new Date().getFullYear() +
          " " +
          new Date().getDate() +
          (new Date().getMonth() + 1)
      );
      this.dialogFormVisible = false;
      this.dialogFormVisible1 = false;
      this.dialogFormVisible2 = false;

      // init data
      this.accessToken = JSON.parse(sessionStorage.getItem("access_token"))
      this.dbid = JSON.parse(sessionStorage.getItem("dbid"))
      this.userName = JSON.parse(sessionStorage.getItem("login_name"))
      this.password = JSON.parse(sessionStorage.getItem("password"))
      // init store data
      this.storeNumber = JSON.parse(sessionStorage.getItem("store")).storeNumber
      this.storeId = JSON.parse(sessionStorage.getItem("store")).storeId
      this.storeName = JSON.parse(sessionStorage.getItem("store")).storeName
      this.storeLocation = JSON.parse(sessionStorage.getItem("store")).storeLocation
      this.repositoryNumber = JSON.parse(sessionStorage.getItem("store")).repositoryNumber
      // get order to buy
      request
        .get("/orderService/getAllOrderByTypeDisplay/ORDER_BUY")
        .then((request) => {
          var Data = request.data;
          this.tableData = Data.data;
        })
        .catch((err) => {
          console.log(err)
          this.loading = false;
          this.$message.error("获取数据出错，请联系管理员！");
          return;
        });
    },
    
    getGoodList() {
      // 请求获取店面所有已上架的商品信息
      let repositoryNumber = JSON.parse(sessionStorage.getItem("store")).repositoryNumber
      request
        .get("/api/v1/linkjdy/getstoreGood/" + this.accessToken 
              + "/" + this.dbid + "/" + this.storeId + "/" + repositoryNumber)
        .then((request) => {
          var respData = request.data
          console.log(respData.data)
          this.goodTable = respData.data
          this.goodTable.forEach(good => {
            good.validDate = new Date(good.validDate)
          })
        })
        .catch(() => {
          this.loading = false;
          this.$message.error("获取数据出错，请联系管理员！");
          return;
        });
      this.chooseGoodVisible = true;
    },

    chooseGood(row) {
      //  处理添加求购订单的情况
      let type = this.getGoodDataType
      if(type==1) {
        this.order.goodId = row.goodId
        this.order.goodName = row.goodName
        this.order.goodType = row.goodType
        this.order.spec = row.spec
        this.order.unitNumber = row.unit
        this.order.wholeSalePrice = row.wholeSalePrice
        this.order.retailPrice = row.retailPrice
        this.order.validDate = row.validDate

        this.chooseGoodVisible = false
        this.dialogFormVisible2 = true
      } 
      //  处理报价单的情况
      else if(type==2) {
        this.offer.goodId = row.goodId
        this.offer.goodName = row.goodName
        this.offer.goodType = row.goodType
        this.offer.spec = row.spec
        this.offer.unitNumber = row.unit
        this.offer.wholeSalePrice = row.wholeSalePrice
        this.offer.retailPrice = row.retailPrice
        this.offer.validDate = row.validDate

        if(row.goodNumber<this.temp.goodNumber) {
          this.$message.error('此商品的库存不足')
          return
        } else {
          this.offer.goodNumber = this.temp.goodNumber
        }

        this.chooseGoodVisible = false
        this.dialogFormVisible1 = true;
      }
    },

    handleAddOrder() {
      this.getGoodDataType = 1
      this.getGoodList()
    },

    addOrder() {
      // 成功
      request
        .post("/orderService/addAOrder/", {
          orderId: 0,
          orderType: this.orderType,
          orderState: this.orderState,
          username: this.userName,
          password: this.password,
          storeId: this.storeNumber,
          storeName: this.storeName,
          storeLocation: this.storeLocation,
          warehouseNumber: this.repositoryNumber,
          goodId: this.order.goodId,
          goodName: this.order.goodName,
          goodNumber: this.order.goodNumber,
          goodType: this.order.goodType,
          spec: this.order.spec,
          unit: this.order.unitNumber,
          wholeSalePrice: this.order.wholeSalePrice,
          retailPrice: this.order.retailPrice,
          validDate: 
            this.order.validDate.getFullYear() +
            "." +
            (this.order.validDate.getMonth() + 1) +
            "." +
            this.order.validDate.getDate() +
            "." +
            this.order.validDate.getHours(),
          price: this.order.price,
          start_time:
            new Date().getFullYear() +
            "." +
            (new Date().getMonth() + 1) +
            "." +
            new Date().getDate() +
            "." +
            new Date().getHours(),
          end_time:
            this.order.date.getFullYear() +
            "." +
            (this.order.date.getMonth() + 1) +
            "." +
            this.order.date.getDate() +
            "." +
            this.order.date.getHours(),
          // exhibition_fee: 0
        })
        .then((request) => {
          console.log("request" + request);
          var Data = request.data;
          if (Data.code == 200) {
            this.$message.success("添加成功");
            // 重新加载界面
            this.init();
          }
        })
        .catch((err)=>{
          console.log(err)
          this.$message.error("获取数据出错，请联系管理员！")
          return
        });
      // 初始化数据
      // this.order.goodName = "";
      // this.order.goodType = "";
      this.order.price = null;
      this.order.goodNumber = null;
      this.order.date = null;
    },
    
    seeMore(row) {
      this.temp.storeName = row.store.storeName;
      this.temp.storeLocation = row.store.location;
      this.temp.goodId = row.good.goodId;
      this.temp.goodName = row.good.goodName;
      this.temp.goodNumber = row.goodNumber;
      this.temp.goodType = row.good.goodType;
      this.temp.spec = row.good.spec;
      this.temp.unitNumber = row.good.unit;
      this.temp.end_time = row.end_time;
      this.temp.price = row.price;
      this.temp.orderId = row.orderId;
      request
        .get("/quotationService/getQuotionsStoreIdByOrderId/" + row.orderId)
        .then((request) => {
          // console.log("request" + request);
          var Data = request.data;
          if (this.storeNumber == row.store.storeId) {
            this.show1 = true;
            this.show2 = false;
            this.show = false;
          } else if (this.isInArray(Data.data, this.storeNumber)) {
            this.show2 = true;
            this.show1 = false;
            this.show = false;
          } else {
            this.show = true;
            this.show1 = false;
            this.show2 = false;
          }
        })
        .catch((err)=>{
          console.log(err)
          this.$message.error("获取数据出错，请联系管理员！")
          return
        });

      this.dialogFormVisible = true;
    },

    handleAddQuotation() {
      this.getGoodDataType = 2
      this.getGoodList()
    },

    sure() {
      // 提供报价
      console.log("提供的报价为 ： " + this.offer.offer);
      // 报价的单子为 temp
      // 添加 报价单
      // 暂时还未测试
      request
        .post("/quotationService/addQuotation/", {
          access_token: this.accessToken,
          dbid: this.dbid,
          quotationId: 0,
          quotedType: "QUOTATION_SOLD",
          quotedState: "QUOTATION_DISPLAY",
          quotedPrice: this.offer.offer,
          username: this.userName,
          password: this.password,
          storeId: this.storeNumber,
          storeName: this.storeName,
          storeLocation: this.storeLocation,
          warehouseNumber: this.repositoryNumber,
          goodId: this.offer.goodId,
          goodName: this.offer.goodName,
          goodNumber: this.offer.goodNumber,
          goodType: this.offer.goodType,
          spec: this.offer.spec,
          unit: this.offer.unitNumber,
          wholeSalePrice: this.offer.wholeSalePrice,
          retailPrice: this.offer.retailPrice,
          validDate: 
            this.offer.validDate.getFullYear() +
            "." +
            (this.offer.validDate.getMonth() + 1) +
            "." +
            this.offer.validDate.getDate() +
            "." +
            this.offer.validDate.getHours(),
          start_time:
            new Date().getFullYear() +
            "." +
            (new Date().getMonth() + 1) +
            "." +
            new Date().getDate() +
            "." +
            new Date().getHours(),
          end_time:
            this.offer.date.getFullYear() +
            "." +
            (this.offer.date.getMonth() + 1) +
            "." +
            this.offer.date.getDate() +
            "." +
            this.offer.date.getHours(),
          orderId: this.temp.orderId,
        })
        .then((request) => {
          var Data = request.data;
          console.log("返回的状态为 " + Data.code);
          if (Data.code == 200) {
            this.$message.success(Data.message);
            // this.offer = 0;
            // this.offer.goodname = "";
            // this.offer.goodtype = "";
            // this.offer.goodnum = 0;
            // this.offer.date = new Date();
            this.dialogFormVisible1 = false;
            this.init();
          } else {
            this.$message.error(Data.message)
          }
        })
        .catch((err)=>{
          console.log(err)
          this.$message.error("获取数据出错，请联系管理员！")
          return
        })
    },
    
    isInArray(array, value) {
      var a = 1;
      array.forEach(function (index) {
        if (index == value) {
          a = 0;
        }
      });
      console.log("awei " + a);
      return a == 0 ? true : false;
    }
  },
};
</script>

<style scoped>
</style>
